<template>
	<div class="t7">
		<div style="margin: auto;margin-top: 20px;height: 80px;">
			<div style="text-align: left;font-size: 15px;">
				<span>方案设计</span> <span style="margin-left: 5px;margin-right: 5px;">></span> <span>管理方案</span><span style="margin-left: 5px;margin-right: 5px;">></span> <span>选科方案</span>
				</br>
			</div>
			<div style="height: 50px;width: 100%;">
				<div style="display: inline-block;text-align: left;width: 20%;">
					<img src="../img/nan.png" style="width: 20px;vertical-align: middle;" v-show="infos.sex==0"/>
					<img src="../img/nv.png" style="width: 20px;vertical-align: middle;" v-show="infos.sex==1"/>
					<div style="display: inline-block;margin-top: 5px;font-size: 15px;">
						<span style="margin-left: 0.5em;">{{infos.name}}</span>
					</div>
				</div>
				<div style="display: inline-block;text-align: right;width: 80%;line-height: 50px;">
					<button style="margin-right: 10px;"  @click="xgfa" class="btn">新建方案</button>
					<button style="margin-right: 30px;"  @click="Sorts()" class="btn">自动排序</button>
				</div>
			</div>
		</div>
		<div class="d2">
			<el-table :data="tableData" border  :cell-style="{textAlign: 'center'}"
			 v-loading="loading"
			    element-loading-text="拼命加载中"
			    element-loading-spinner="el-icon-loading"
				:header-cell-style="{textAlign: 'center',backgroundColor:'#f5f7fa',color:'black',fontWeight:'normal'}" style="width: 100%;">
				<el-table-column prop="programmeId" label="方案编号" min-width="40px">
					<template slot-scope="scope">
						<i class="el-icon-top" style="color: red;cursor: pointer;" @click="risescheme(scope)"></i>
						<span style="width: 30px;display: inline-block;">{{scope.row.sort}}</span>
						<i class="el-icon-bottom" style="color: red;cursor: pointer;"
							@click="decline(scope)"></i></br />
					</template>
				</el-table-column>
				<el-table-column prop="programmeName" label="方案名称">
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" min-width="70px">
				</el-table-column>
				<el-table-column label="操作" min-width="40px">
					<template slot-scope="scope">
						 <button @click="handleClick(scope.row)" type="text"
								size="small" class="btn">预览修改</button>
						<button type="text" size="small" class="btn" style="margin-left: 10px;" @click="deleteProgramme(scope.$index,tableData,scope.row)">删除</button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div id="npt" v-if="this.user.usertype=3">
			<el-button style="background-color: green;color: white;width:60px;height:60px;margin-top: 20px;"
				@click="fh()" circle >上一级</el-button>
		</div>
	</div>
</template>

<script>
	import {
		request
	} from "../util/request.js"
	export default {
		data() {
			return {
				sort:[],
				sortList:[],
				sorts:[],
				user:null,
				tableData: [],
				infos:{},
				loading:false,
				neweditForm:[],
			}
		},
		methods: {
			Sorts(){
				for(let i=0;i<this.tableData.length;i++){
					this.sort.push({
						"id":this.tableData[i].id,
						"sort":i+1
					})
				}
				request({
					method: 'post',
					url: 'stuNewSchoolScheme/UpdateSort',
					data: this.sort
				}).then(res => {
					if (res.code == 0 || res.code == 200) {
						this.$message({
							message: '排序成功！',
							type: 'success'
						});
					} else {
						this.$message({
							message: '排序成功~',
							type: 'error'
						});
					}
					this.$router.go(0)
				})
			},
			UpdateSort(){
				this.tableData.forEach(i=>{
					this.sorts.push({
						"id":i.id,
						"sort":i.sort
					})
				})
				request({
					method: 'post',	
					url: 'stuNewSchoolScheme/UpdateSort',
					data: this.sorts
				}).then(res => {
					if (res.code == 0 || res.code == 200) {
						this.$message({
							message: '调序成功！',
							type: 'success'
						});
					} else {
						this.$message({
							message: '调序成功~',
							type: 'error'
						});
					}
					this.$router.go(0)
				})
			},
			decline(row) {
				let W=false;
					for (var x = this.sortList.length - 1; x >= 0; x--) {
						if ((row.row.sort+1) === this.sortList[x]) {
							W=true;
							for (var y = 0; y < this.tableData.length; y++) {
								if (this.tableData[y].sort === this.sortList[x]) {
									this.tableData[row.$index].sort = this.sortList[x]
									this.tableData[y].sort = this.sortList[x-1]
								}
								this.tableData[row.$index].sort = this.sortList[x]
							}
						}
					}
					if(W==false){
						this.tableData[row.$index].sort=(row.row.sort+1)
					}
					
				this.UpdateSort()
			},
			risescheme(row) {
				const sort=row.row.sort
				let shi=false;
				if (row.row.sort != 1&&row.row.sort!="1") {
					console.log("aaaa"+this.sortList)
					for (var i = 0; i < this.sortList.length; i++) {
						
						if ((row.row.sort-1) === this.sortList[i]) {
							shi=true;
							for (var j = 0; j < this.tableData.length; j++) {
								console.log("进这里了")
								if (this.tableData[j].sort === this.sortList[i]) {
									this.tableData[row.$index].sort = this.sortList[i]
									this.tableData[j].sort = this.sortList[i+1]
								}
								this.tableData[row.$index].sort = this.sortList[i]
							}
						}
					}
					if(shi==false){
						this.tableData[row.$index].sort=(row.row.sort-1)
					}
				}else{
					this.$message({
						message:"已经是第一位了！",
						type:'error'
					})
					return
				}
				this.UpdateSort()
			},
			fh(){
				this.$router.push({
					path:"/design/management"
				})
			},
			xgfa(){
				this.$router.push({
					path:"/newSchoolProgramme"
				})
			},
			deleteProgramme(index,rows,row){
				this.$confirm('确定删除该方案嘛?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          request({
				          	method: 'get',
				          	url: 'stuNewSchoolScheme/deleteNewStuScheme',
				          	params: {
				          		programmeId: row.programmeId,
								stuId:this.infos.id
				          	}
				          }).then(res => {
				          	if(res.code==0||res.code==200){
				          		rows.splice(index,1);
				          		this.$message({
				          		         message: '删除成功！',
				          		         type: 'success'
				          		       });
				          	}else{
								this.$message({
								         message: '删除失败~',
								         type: 'error'
								       });
							}
				          })
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			handleClick(row){
				const infos = row;
				// console.log(infos)
				localStorage.setItem('xkvolunteer', JSON.stringify(infos))
				this.$router.push({
					name: 'XkPreview',
					params: {
						info: infos
					}
				})
			},
			getNewSchoolProgrammes() {
				this.loading=true
				request({
					method: 'POST',
					url: 'stuNewSchoolScheme/getNewSchoolProgrammes',
					params: {
						stuId: this.infos.id
					}
				}).then(res => {
					this.tableData = res.data
					res.data.forEach(i=>{
						this.sortList
					})
					this.tableData.forEach(i=>{
						this.sortList.push(i.sort)
					})
					this.loading=false
				})
			},
			getStu(){
				if(this.user!=null){
					request({
						method: 'get',
						url: 'students/getStu',
						params: {
							Id: this.user.userId
						}
					}).then(res => {
						this.infos = res.data
						this.getNewSchoolProgrammes()
					})
				}
			}
		},
		created() {
			const user = sessionStorage.getItem("user");
			this.user=JSON.parse(user)
			if(this.user.userType==3){
				this.infos = JSON.parse(localStorage.getItem('stu'))
				this.getNewSchoolProgrammes()
			}else if(this.user.userType==4){
				this.getStu()
			}
			
		}
	}
</script>

<style>
	.t7{
		width: 1300px;
		min-width: 1300px;
		/* text-align: center; */
		margin: auto;
	}
	
	.t7 .btn {
		font-size: 15px;
		width: 80px;
		border-radius: 5px;
		height: 35px;
		background-color: coral;
		color: #fff;
		text-align: center;
		border: 1px solid transparent;
		font-weight: 900;
		font-size: 15px;
	}
	
	.t7 th {
		height: 30px;
		border: 1px #68696a solid;
	}
	
	.t7 .d2 {
		margin: auto;
		width: 100%;
		/* margin-top: 20px; */
	}
	
	
	.t7 table {
		border-spacing: 0;
		/*去掉单元格间隙*/
	
	}
	.t7 button{
		padding: 0 0 0 0;
	}
</style>
